<!-- 查快递 -->
<template>
  <div class="home">
    <div class="top">
      <div class="search">
        <svgIcon iconName="icon-sousuo" :fontSize="'40px'"></svgIcon>
        <input 
          type="text" 
          placeholder="运单号查询/关键字索引"
          v-model="searchText"
          @input="handleSearch"
        >
        <svgIcon iconName="icon-saoyisao" :fontSize="'40px'"></svgIcon>
      </div>
      <div class="fenlei">
        <div :class="{ fl_active: currentTab === '寄件' }" @click="changeTab('寄件')">寄件</div>
        <div :class="{ fl_active: currentTab === '收件' }" @click="changeTab('收件')">收件</div>
        <div :class="{ fl_active: currentTab === '运送中' }" @click="changeTab('运送中')">运送中</div>
        <div class="shaixuan" @click="showPopup">筛选
          <svgIcon iconName="icon-xialakuang" :fontSize="'30px'"></svgIcon>
        </div>
      </div>
    </div>
    <div class="content">
      <template v-if="filteredData.length > 0">
        <transition-group name="list" tag="div">
          <div class="item" v-for="(item,index) in filteredData" :key="item.id">
            <div class="item_id">
              {{ item.id }}
              <svgIcon iconName="icon-fuzhi" :fontSize="'30px'"></svgIcon>
            </div>
            <div class="item_dz">
              <div>
                {{ item.to_dz }}
                <p>{{ item.to_name }}</p>
              </div>
              <div style="height: 90px; width: 130px;">
                <svgIcon iconName="icon-a-iconfasongjiantou" :fontSize="'60px'"></svgIcon>
                <p style="font-size: 28px;color: #000; position: absolute; top: 40px; left: 20px;">{{ item.info }}</p>
              </div>
              <div>
                {{ item.down_dz }}
                <p>{{ item.down_name }}</p>
              </div>
            </div>
            <div class="item_time">
              寄出时间:
              <span>{{ item.time }}</span>
            </div>
            <div class="item_qt">
              <div @click="deleteItem(index)">删除</div>
              <div>分享</div>
              <div>添加备注</div>
            </div>
          </div>
        </transition-group>
      </template>
      <div v-else class="no-data">
        <svgIcon iconName="icon-wushuju" :fontSize="'200px'" color="#999"></svgIcon>
        <p>暂无符合条件的快递</p>
      </div>
    </div>
    <van-popup 
      v-model:show="show" 
      :style="{ top: '208px'}"
      :overlay="true"
      position="top"
      round
    >
      <div class="popup-content">
        <div class="kd_info">
          <div class="info_title">快递状态</div>
          <div class="info">
            <div 
              v-for="(item, index) in info_list" 
              :key="index" 
              class="item"
              :class="{ item_active: selectedInfo.includes(item) }"
              @click="toggleInfo(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="kd_time">
          <div class="time_title">时间范围</div>
          <div class="time">
            <div 
              v-for="(item, index) in time_list" 
              :key="index" 
              class="item"
              :class="{ item_active: selectedTime === item }"
              @click="selectTime(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="bottom_btn">
          <div class="del_btn" @click="resetFilter">
            重置
          </div>
          <div class="sure_btn" @click="applyFilter">
            确定
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import svgIcon from '@/components/svgIcon.vue'
import { ref, computed } from 'vue'
import kd_data from '../assets/data.json'

const show = ref(false);
const currentTab = ref('寄件');
const data = ref([...kd_data]); // 将数据转换为响应式数组
const selectedInfo = ref([]);
const selectedTime = ref('');
const searchText = ref('');

const filteredData = computed(() => {
  let filtered = data.value;
  
  // 搜索过滤
  if (searchText.value) {
    const searchLower = searchText.value.toLowerCase();
    filtered = filtered.filter(item => 
      item.id.toLowerCase().includes(searchLower) ||
      item.to_dz.toLowerCase().includes(searchLower) ||
      item.down_dz.toLowerCase().includes(searchLower) ||
      item.to_name.toLowerCase().includes(searchLower) ||
      item.down_name.toLowerCase().includes(searchLower) ||
      (item.title && item.title.toLowerCase().includes(searchLower))
    );
  }
  
  // 根据当前标签筛选
  switch(currentTab.value) {
    case '寄件':
      filtered = filtered.filter(item => item.to_name === '找裁缝');
      break;
    case '收件':
      filtered = filtered.filter(item => item.down_name === '找裁缝');
      break;
    case '运送中':
      filtered = filtered.filter(item => item.info === '运送中');
      break;
  }

  // 根据筛选条件过滤
  if (selectedInfo.value.length > 0) {
    filtered = filtered.filter(item => selectedInfo.value.includes(item.info));
  }
  
  if (selectedTime.value) {
    const now = new Date();
    const timeMap = {
      '近一周': 7,
      '近一月': 30,
      '近三月': 90,
      '近一年': 365
    };
    const days = timeMap[selectedTime.value];
    if (days) {
      const pastDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
      filtered = filtered.filter(item => new Date(item.time) >= pastDate);
    }
  }

  return filtered;
});

const deleteItem = (index) => {
  // 从原始数据中删除对应项
  const itemToDelete = filteredData.value[index];
  const originalIndex = data.value.findIndex(item => item.id === itemToDelete.id);
  if (originalIndex !== -1) {
    data.value.splice(originalIndex, 1);
  }
};

const toggleInfo = (info) => {
  const index = selectedInfo.value.indexOf(info);
  if (index === -1) {
    selectedInfo.value.push(info);
  } else {
    selectedInfo.value.splice(index, 1);
  }
};

const selectTime = (time) => {
  selectedTime.value = time;
};

const resetFilter = () => {
  selectedInfo.value = [];
  selectedTime.value = '';
};

const applyFilter = () => {
  show.value = false;
};

const changeTab = (tab) => {
  currentTab.value = tab;
};

const showPopup = () => {
  show.value = true;
};

const handleSearch = () => {
  // 可以在这里添加防抖逻辑，如果需要的话
};

const info_list = ref(['待寄出','运送中','派送中','已签收','待取件','待派送','已取消','已作废','已转寄','已退回','其他']);
const time_list = ref(['近一周','近一月','近三月','近一年']);
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  .top {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    .search {
      width: 550px;
      height: 80px;
      margin: 30px auto;
      border-radius: 30px;
      background-color: #f4f4f4;
      padding: 0 20px;
      display: flex;
      align-items: center;
      input {
        margin-left: 20px;
        width: 400px;
        height: 100%;
        background-color: #f4f4f4;
        font-size: 28px;
      }
    }
    .fenlei {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      div {
        font-size: 28px;
        color: gray;
        line-height: 70px;
      }
      .shaixuan {
        border-radius: 30px;
        background-color: #f4f4f4;
        padding: 0 20px;
        height: 50px;
        line-height: 50px !important;
      }
      .fl_active {
        border-bottom:  4px red solid;
        color: #000;
      }
    }
  }
  .content {
    width: 100%;
    margin-top: 210px;
    min-height: 1200px;
    background-color: #f3f3f3;
    padding: 30px;
    padding-bottom: 100px;
    .item {
      width: 100%;
      background-color: #fff;
      min-height: 400px;
      border-radius: 30px;
      padding: 0 30px;
      margin-top: 50px;
      .item_id {
        color: gray;
        font-size: 24px;
        height: 80px;
        line-height: 80px;
        text-align: left;
      }
      .item_dz {
        width: 100%;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        div {
          font-size: 38px;
          color: #000;
          position: relative;
          p {
            color: gray;
            font-size: 32px;
          }
        }
      }
      .item_time {
        color: gray;
        font-size: 24px;
        height: 80px;
        line-height: 80px;
        text-align: left;
        span {
          margin-left: 20px;
          color: #000;
        }
      }
      .item_qt {
        width: 100%;
        height: 110px;
        display: flex;
        align-items: center;
        padding-left: 100px;
        div {
          border: 1px solid gray;
          color: #000;
          height: 60px;
          border-radius: 30px;
          line-height: 60px;
          width: 150px;
          margin-left: 30px;
          font-size: 32px;
        }
      }
    }
  }
}

.popup-content {
  min-height: 300px;
  background-color: #fff;
  padding: 0 30px;
  color: #000;
  .kd_info {
    width: 100%;
    .info_title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 32px;
      text-align: left;
    }
    .info {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        margin: 10px;
        width: 150px;
        height: 60px;
        background-color: #f5f5f5;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
        color: #000;
        font-size: 30px;
      }
    }
  }
  .kd_time {
    width: 100%;
    .time_title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 32px;
      text-align: left;
    }
    .time {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        margin: 10px;
        width: 150px;
        height: 60px;
        background-color: #f5f5f5;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
        color: #000;
        font-size: 30px;
      }
    }
  }
  .bottom_btn {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .del_btn {
      width: 320px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 42px;
      border-radius: 30px;
      border: 1px solid #000;
    }
    .sure_btn {
      width: 320px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 42px;
      border-radius: 30px;
      background-color: #fe4d3b;
      color: #fff;
    }
  }
}
.item_active {
  background-color: #f8dfdf !important;
  color: red !important;
}
.no-data {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  p {
    margin-top: 30px;
    font-size: 32px;
    color: #999;
  }
}

// 列表动画
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

// 确保其他项平滑移动
.list-move {
  transition: transform 0.3s ease;
}
</style>